<template>
  <router-view></router-view>
</template>

<script>
export default {
  data() {
    return {
      theme: this.$store.state.theme
    }
  },
  mounted() {
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      const detectZoom = () => {
        let ratio = 0,
          screen = window.screen,
          ua = navigator.userAgent.toLowerCase()
        if (window.devicePixelRatio !== undefined) {
          ratio = window.devicePixelRatio
        } else if (~ua.indexOf('msie')) {
          if (screen.deviceXDPI && screen.logicalXDPI) {
            ratio = screen.deviceXDPI / screen.logicalXDPI
          }
        } else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
          ratio = window.outerWidth / window.innerWidth
        }
        if (ratio) {
          ratio = Math.round(ratio * 100)
        }
        return ratio
      }
      const m = detectZoom()
      console.log(this.$route.name, 'this.$route.name')
      if (this.$route.name === 'home_index') {
        const userAgent = navigator.userAgent.toLowerCase()
        if (userAgent.indexOf('mac') >= 0) {
          // return "Mac";
          document.body.style.zoom = 1
        } else {
          document.body.style.zoom = 100 / Number(m)
        }
      } else {
        document.body.style.zoom = 1
      }
    }
  },
  watch: {
    '$route.name': {
      handler() {
        this.handleResize()
      },
      immediate: true
    }
  }
}
</script>

<style lang="less">
.app-main {
  width: 100%;
  height: 100%;
}
</style>
